{extend name="index_layout"/}
{block name="main"}
<form class="layui-form" method="post">

    <div class="layui-form-item">
        <label class="layui-form-label">工艺路线编号 </label>
        <div class="layui-input-block">
            <input type="text" name="nums" value="{$productRoute.nums}" lay-verify="required" autocomplete="off" placeholder="工艺路线编号" class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">工艺路线名称 </label>
        <div class="layui-input-block">
            <input type="text" name="title" value="{$productRoute.title}" lay-verify="required" autocomplete="off" placeholder="工艺路线名称" class="layui-input">
        </div>
    </div>
    <input type="hidden" value="{$productRoute.id}" name="id">
    <div class="layui-form-item">
        <label class="layui-form-label">工序列表 </label>
        <div class="layui-input-block">
            <table class="layui-table">
                <thead>
                    <th>类型</th>
                    <th>工序/工艺路线</th>
                    <th></th>
                </thead>
                <tbody>
                    {volist name="productRoute.procedure_ids" key="k" id="item"}
                    <tr>
                        <td>
                            <select name="type[]" id="type" class="type" z-idx="{$k}" lay-filter="filter">
                                <option value="0">请选择</option>
                                <option {if $item[0] == 1} selected {/if}  value="1">工序</option>
                                <option {if $item[0] == 2} selected {/if}  value="2">工艺路线</option>
                            </select>
                        </td>
                        <td>
                            <select name="procedure[]" id="procedure_{$k}">
                                {if $item[0] == 1}
                                    {volist name="procedureList" id="val"}

                                    <option ids="{$item[1]}" {if $item[1] == $val.id} selected {/if} value="{$val.id}">{$val.title}</option>
                                    {/volist}
                                {else}
                                    {volist name="productRouteList" id="val"}
                                    <option {if $item[1] == $val.id} selected {/if} value="{$val.id}">{$val.title}</option>
                                    {/volist}
                                {/if}
                            </select>
                        </td>
                        <td><button class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
                        </td>
                    </tr>
                    {/volist}
                </tbody>
            </table>
            
            <button class="layui-btn layui-btn-xs add-line" type="button" style="margin-left: 20%;">增加</button>
        </div>
    </div>

    <div class="layui-form-item layer-footer">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter='ds' type="button" data-refresh="false">立即提交</button>
            <button class="layui-btn layui-btn-normal" type="button" onclick="var index1 = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index1);">返回</button>
        </div>
    </div>
</form>

{/block}
{block name="script"}
<script>
    layui.use(['form','jquery'], function() {
        var form = layui.form;
        var $ = layui.jquery;
        var idx = 0;
        $('.add-line').on('click',function(){
            var _html = '<tr>'+
                '<td>'+
                    '<select name="type[]" id="type" class="type" z-idx="'+idx+'" lay-filter="filter">'+
                        '<option value="0">请选择</option>'+
                        '<option value="1">工序</option>'+
                        '<option value="2">工艺路线</option>'+
                    '</select>'+
                '</td>'+
               ' <td>'+
                    '<select name="procedure[]" id="procedure_'+idx+'">'+
                        '<option value=""></option>'+
                    '</select>'+
                '</td>'+
                '<td><button class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>'+
                '</td>'+
            '</tr>';
            $('.layui-table').find('tbody').append(_html);
            form.render();
            idx += 1;
        })
        $('body').on('click','.del',function(){
            $(this).parent().parent().remove();
        })
        form.on('select(filter)',function(data){
            var index = $(data.elem).attr('z-idx');
            $.post('{:url("getProcedure")}',{type:data.value},function(res){
                var data = res.data;
                $('#procedure_'+index+'').html('');
                for(var j in data){
                    $('#procedure_'+index+'').append(new Option(data[j].title,data[j].id));//往下拉菜单里添加元素
                }
                form.render();
            })
        })
        
        form.on('submit(ds)',function(data){
            var param = data.field;
            $.post('{:url("editPost")}',param,function(res){
                if(res.code > 0){
                    layer.msg('添加成功');
                    setTimeout(() => {
                        var index1 = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index1);
                        parent.location.reload();
                    }, 500);
                }else{
                    layer.msg(res.msg);
                }
            },'json');
        })
    });
</script>
{/block}
    